<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form isheader" v-if="headerShow">
        <div>
          <a-form size="small" :model="pageData" layout="inline">
            <CorporateSectorCascader :configCascader="configCascader2" @changeCascader="changeCascader2"/>
            <a-form-item label="仓库">
              <a-select popup-container="html" class="bacClass" :style="{ width: '200px' }" v-model="pageData.b"
                        allow-clear>
                <a-option v-for="item in fhWhList" :value="item.id">
                  {{ item.warehouseName }}
                </a-option>
              </a-select>
            </a-form-item>
            <a-form-item label="物料编号">
              <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="pageData.c"/>
            </a-form-item>
            <a-form-item label="物料名称">
              <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="pageData.d"/>
            </a-form-item>
          </a-form>
        </div>
        <div>
          <Toolbar :items="['查询']" @select="selectHandler">
          </Toolbar>
        </div>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18"/>
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18"/>
        </a-divider>
      </div>
    </template>
    <template #pageTabel>
      <a-tabs   :lazy-load="true" :justify="true">
        <a-tab-pane title="胶管仓库存查询" :key="1">
          <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                           rowSelection="multiple" @grid-ready="gridReady" style="height: calc(100% - 45px)"
                           :defaultColDef="defaultColDef"
                           class='ag-theme-alpine' :rowData="tableDataList" :columnDefs="tc"
                           :localeText="localeText1"></AgGridVuesCopys>
          <paginationCopys :page-size-options="pagingList1" :total="fySelet2.total" show-total show-jumper
                           show-page-size @change="PageSize2"
                           @page-size-change="change2" style="justify-content: center" :page-size="fySelet2.size"
                           :current="fySelet2.page"/>
        </a-tab-pane>
      </a-tabs>
    </template>
  </pageTabelLayout>
</template>
<script setup lang="ts">
import {ref, reactive} from "vue"
import {post, get} from "@/api/http"
import {localeText} from '@/api/aggridZw'

import Toolbar from "@/components/Toolbar.vue"
import {Message, Modal} from "@arco-design/web-vue"
import WHService from '@/service/wh'
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
import {pagingList} from '@/api/paging'

const pagingList1: any = ref(pagingList)
const headerShow = ref(true)
const localeText1: any = ref(localeText)

const pageData: any = reactive({
  a: '',
  b: '',
  c: '',
  d: '',
})

const selectHandler = () => {
  wjYcList()
}
const tableDataList: any = ref([])
const gridOption = ref()
const gridReady = (params: any) => {
  gridOption.value = params.api
}
const defaultColDef = {
  sortable: true,
  resizable: true,
  filter: true,
}

const fySelet2: any = reactive({
  total: 10,
  size: 10,
  page: 1
})

const PageSize2 = (val: any) => {
  fySelet2.page = val
  wjYcList()
}

const change2 = (val: any) => {
  fySelet2.size = val
  wjYcList()
}

const tc = [
  {
    showRowGroup: 'hide_def',
    "headerName": "",
    "checkboxSelection": true,
    "headerCheckboxSelection": true,
    "pinned": "left",
    "width": 50,
    resizable: false,
    filter: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 50,
    lockPosition: "left",
  },
  {
    headerName: '公司',
    field: 'companyName',
    // pinned: o['fixed'],
    width: 150
  },
  {
    headerName: '仓库类型名称',
    field: 'warehouseTypeName',
    width: 150
  },
  {
    headerName: '仓库名称',
    field: 'warehouseName',
    width: 150
  },
  {
    headerName: '物料大类',
    field: 'majorCategory',
    width: 150
  },
  {
    headerName: '物料小类',
    field: 'subCategory',
    width: 150
  },
  {
    headerName: '物料编号',
    field: 'materialCode',
    width: 150
  },
  {
    headerName: '物料名称',
    field: 'materialName',
    width: 150
  },
  {
    headerName: '数量',
    field: 'totalNum',
    width: 150
  },
  {
    headerName: '单位',
    field: 'unit',
    width: 150
  },
  {
    headerName: '规格',
    field: 'specification',
    width: 150
  },
  {
    headerName: '单价',
    field: 'price',
    width: 150
  },
  // {
  //     headerName: '批次',
  //     field: 'grade',
  //     width: 150
  // },
  {
    headerName: '储位',
    field: 'location',
    width: 150
  },
]

const wjYcList = () => {
  post({
    url: 'dwWms/dwRubberStockSummary/getPage',
    data: {
      page: fySelet2.page,
      size: fySelet2.size,
      materialCode: pageData.c,
      materialName: pageData.d,
      companyId: pageData.a,
      companyName: pageData.b,
    }
  }).then((res: any) => {
    gridOption.value.setRowData(res.data.data)
    tableDataList.value = res.data.data
    fySelet2.total = res.data.total
  })
}
const configCascader2 = ref<{}>({
  corporateWidth: '180px', //公司宽度
  sectorWidth: '180px', //部门宽度
  corporateRquired: false, //公司是否必填
  sectorRquired: false, //部门是否必填
  size: 'mini', //选择框大小'mini' | 'small' | 'medium' | 'large'
  corporateName: '选择公司', //公司label
  sectorName: '选择部门', //部门label
  cascaderShow: 'sector', //配置部门不显示
})
const whService = new WHService()
const fhWhList: any = whService.whList
const changeCascader2 = (data: any) => {
  const {corporateId, sectorId, sectorLabel, corporateLabel} = data
  pageData.b = ""
  pageData.a = corporateId
  whService.getWarhouseListByFirmId(corporateId, '胶管仓')
}
</script>